<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <!-- import Vue before Element -->
    <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
    <!-- import JavaScript -->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="../plugins/elementui/index.js"></script>
</head>
<body>

    <div id="app">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    label="日期"
                    width="180" prop="date">

            </el-table-column>
            <el-table-column
                    label="姓名"
                    width="180" prop="name">
            </el-table-column>
            <el-table-column
                        label="年龄"
                        width="180" prop="age">


         </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row.name)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.age)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>

        new Vue({
            el:"#app",
            data:{
                tableData:[
                    {date:"2020-02-02",name:"xiaoli",age:"18"},
                    {date:"2020-03-02",name:"cc",age:"20"}
                ]
            },
            methods:{

                // handleEdit:function(msg) {
                //     alert(msg)
                // }

                handleEdit(msg){
                    alert(msg+"======");
                },
                handleDelete(msg){
                    alert(msg+"-------");
                }

            }


        })

    </script>
</body>
</html>